<template>
  <div class="carousel-wrapper" :class="{ 'full-screen': fullScreen }">
    <el-carousel
      ref="carouselRef"
      :height="height"
      :autoplay="autoplay"
      :interval="interval"
      :type="type"
      :trigger="trigger"
      :arrow="arrow"
      :loop="loop"
      :direction="direction"
      :pause-on-hover="pauseOnHover"
      :indicator-position="indicatorPosition"
      @change="handleChange"
    >
      <el-carousel-item v-for="(item, index) in items" :key="index">
        <div class="carousel-item" :class="itemClasses">
          <!-- 图片内容 -->
          <el-image
            :src="item.image"
            :alt="item.title"
            class="carousel-image"
            :class="imageClasses"
            fit="cover"
          >
            <template #placeholder>
              <div class="image-placeholder">
                <el-icon class="placeholder-icon"><Picture /></el-icon>
                <span class="placeholder-text">图片加载中...</span>
              </div>
            </template>
            <template #error>
              <div class="image-placeholder">
                <el-icon class="placeholder-icon"><PictureFilled /></el-icon>
                <span class="placeholder-text">图片未找到</span>
              </div>
            </template>
          </el-image>

          <!-- 渐变遮罩 -->
          <div
            v-if="showOverlay"
            class="banner-overlay absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent"
          ></div>

          <!-- 文字内容 -->
          <div
            v-if="showCaption && (item.title || item.description)"
            class="carousel-caption"
            :class="captionClasses"
          >
            <div class="container mx-auto px-4">
              <div class="max-w-2xl">
                <h3 v-if="item.title" class="caption-title">
                  {{ item.title }}
                </h3>
                <p v-if="item.description" class="caption-description">
                  {{ item.description }}
                </p>
                <div v-if="item.link" class="caption-action">
                  <el-button
                    type="primary"
                    size="large"
                    class="primary-btn"
                    @click="handleAction(item)"
                  >
                    {{ item.linkText || "了解更多" }}
                  </el-button>
                  <el-button
                    v-if="showSecondaryButton"
                    size="large"
                    class="secondary-btn bg-white/20 backdrop-blur-sm text-white hover:bg-white/30"
                    @click="handleSecondaryAction(item)"
                  >
                    {{ item.secondaryText || secondaryButtonText }}
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 自定义控制按钮 -->
    <div
      v-if="showControls"
      class="banner-controls absolute inset-y-0 left-0 right-0 flex items-center justify-between px-4"
    >
      <el-button circle class="banner-control-btn prev-btn" @click="prev">
        <el-icon><ArrowLeft /></el-icon>
      </el-button>
      <el-button circle class="banner-control-btn next-btn" @click="next">
        <el-icon><ArrowRight /></el-icon>
      </el-button>
    </div>

    <!-- 自定义指示器 -->
    <div
      v-if="customIndicator"
      class="custom-indicator"
      :class="indicatorClasses"
    >
      <span
        v-for="(item, index) in items"
        :key="index"
        class="indicator-dot"
        :class="{ active: currentIndex === index }"
        @click="handleIndicatorClick(index)"
      ></span>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import {
  ArrowLeft,
  ArrowRight,
  Picture,
  PictureFilled,
} from "@element-plus/icons-vue";

const props = defineProps({
  items: {
    type: Array,
    required: true,
    default: () => [],
  },
  height: {
    type: String,
    default: "400px",
  },
  autoplay: {
    type: Boolean,
    default: true,
  },
  interval: {
    type: Number,
    default: 3000,
  },
  type: {
    type: String,
    default: "",
    validator: (value) => ["", "card"].includes(value),
  },
  trigger: {
    type: String,
    default: "hover",
    validator: (value) => ["hover", "click"].includes(value),
  },
  arrow: {
    type: String,
    default: "hover",
    validator: (value) => ["always", "hover", "never"].includes(value),
  },
  direction: {
    type: String,
    default: "horizontal",
    validator: (value) => ["horizontal", "vertical"].includes(value),
  },
  loop: {
    type: Boolean,
    default: true,
  },
  pauseOnHover: {
    type: Boolean,
    default: true,
  },
  indicatorPosition: {
    type: String,
    default: "none",
    validator: (value) => ["outside", "none"].includes(value),
  },
  customIndicator: {
    type: Boolean,
    default: true,
  },
  showCaption: {
    type: Boolean,
    default: true,
  },
  fullScreen: {
    type: Boolean,
    default: false,
  },
  imagefit: {
    type: String,
    default: "cover",
    validator: (value) =>
      ["fill", "contain", "cover", "none", "scale-down"].includes(value),
  },
  showControls: {
    type: Boolean,
    default: false,
  },
  showOverlay: {
    type: Boolean,
    default: false,
  },
  showSecondaryButton: {
    type: Boolean,
    default: false,
  },
  secondaryButtonText: {
    type: String,
    default: "了解更多",
  },
});

const emit = defineEmits(["change", "action", "secondaryAction"]);

const carouselRef = ref(null);
const currentIndex = ref(0);

// 计算样式类
const itemClasses = computed(() => ({
  "relative overflow-hidden": true,
  "h-full": props.fullScreen,
}));

const imageClasses = computed(() => ({
  "w-full h-full": true,
  [`object-${props.imagefit}`]: true,
}));

const captionClasses = computed(() => ({
  "absolute left-0 bottom-0 w-full": true,
  "bg-gradient-to-t from-black/60 to-transparent": !props.showOverlay,
  "p-6 md:p-8": true,
  "text-white": true,
  "z-30": true,
}));

const indicatorClasses = computed(() => ({
  "absolute bottom-4 left-1/2 transform -translate-x-1/2": true,
  "flex items-center space-x-2": true,
  "z-10": true,
}));

// 处理轮播切换
const handleChange = (index) => {
  currentIndex.value = index;
  emit("change", index);
};

// 处理指示器点击
const handleIndicatorClick = (index) => {
  currentIndex.value = index;
};

// 处理链接点击
const handleAction = (item) => {
  emit("action", item);
};

// 处理次要按钮点击
const handleSecondaryAction = (item) => {
  emit("secondaryAction", item);
};

// 上一张/下一张
const prev = () => {
  carouselRef.value?.prev();
};

const next = () => {
  carouselRef.value?.next();
};

defineExpose({
  prev,
  next,
});
</script>

<style lang="scss" scoped>
.carousel-wrapper {
  @apply relative overflow-hidden;

  &.full-screen {
    @apply h-screen;
  }
}

.carousel-item {
  @apply relative h-full;
}

.carousel-image {
  @apply w-full h-full object-cover transition-all duration-500;

  :deep(.el-image__inner) {
    @apply w-full h-full object-cover;
  }

  :deep(.el-image__placeholder),
  :deep(.el-image__error) {
    @apply w-full h-full bg-transparent;
  }
}

.banner-overlay {
  @apply z-[1];
  pointer-events: none;
}

.carousel-caption {
  @apply absolute left-0 bottom-0 right-0 z-[2];
  padding-bottom: 4rem;

  .caption-title {
    @apply text-4xl md:text-5xl font-bold text-white mb-4;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }

  .caption-description {
    @apply text-lg md:text-xl text-gray-100 mb-6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  }

  .caption-action {
    @apply flex items-center space-x-4;

    .primary-btn {
      @apply bg-primary-600 hover:bg-primary-700 border-none text-white;
    }

    .secondary-btn {
      @apply border-none;
      backdrop-filter: blur(4px);
    }
  }
}

.banner-controls {
  @apply z-[3];
  pointer-events: none;

  .banner-control-btn {
    @apply w-12 h-12 bg-white/20 backdrop-blur-sm text-white border-0
           hover:bg-white/30 pointer-events-auto opacity-0 transition-all duration-300
           transform hover:scale-110;

    &:hover {
      @apply bg-white/40;
    }
  }
}

:deep(.el-carousel__container) {
  @apply h-full;
}

:deep(.el-carousel__item) {
  @apply overflow-hidden;
}

:deep(.el-carousel__indicators) {
  @apply bottom-24 z-[2];

  .el-carousel__button {
    @apply w-3 h-3 rounded-full bg-white/60;
  }
}

:deep(.el-carousel__indicator--active) {
  .el-carousel__button {
    @apply bg-white;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.image-placeholder {
  @apply w-full h-full flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-800;

  .placeholder-icon {
    @apply text-5xl text-gray-400 dark:text-gray-600 mb-4;
  }

  .placeholder-text {
    @apply text-sm text-gray-500 dark:text-gray-400;
  }
}
</style>
